<template>
    <div>
        <van-goods-action>
          <van-goods-action-icon 
          :icon="isCollected?'star':'star-o'" 
          :text="isCollected?'已收藏':'未收藏'" 
          :color="isCollected?'#ee0a24':'#666'" 
          @click="hdClickcoll"
          :class="{'red':isCollected}"
          />
          <!-- :class="isCollected?'red':''" -->
          <van-goods-action-icon icon="cart-o" text="购物车" :badge="isLogin?goodsCount:0" @click="$router.push('/cart')"/>
          <van-goods-action-button type="danger" text="立即购买" />
          <van-goods-action-button type="warning" text="加入购物车" @click="goToAddCart"/>
        </van-goods-action>
    </div>
</template>

<script>
    export default{
        props:["goodsCount"],
        data(){
            return{
                isCollected:false,
                isLogin:false
            }
        },
        created() {
            let token = localStorage.getItem("token")
            if(token){
                this.isLogin = true
            }
        },
        methods:{
            goToAddCart(){
                //修改父组件中的 isShowSku
                this.$emit("changeIsShowSku")
            },
            hdClickcoll(){
                //先判断有没有登录，没有登录则跳转到/user界面
                // let token = localStorage.getItem("token")
                // if(!token){
                //     //提示 请先登录
                //     this.$toast("请先登录！");
                //     setTimeout(()=>{
                //         this.$router.push("/user")
                //     },1000)
                //     return
                // }
                // 调用utils
                let ret = this.utils.mustBeLogin()
                if(!ret)return;
                
                this.isCollected = !this.isCollected
            }
        }
    }
</script>

<style lang="less" scoped>
    .red{
        color:#ee0a24;
    }
    .van-goods-action{
        z-index: 9999;
    }
    
</style>
